<!DOCTYPE html>

<html>
<head>
  <title>inspectorTabView.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div class="container">
    <div class="page">

      <div class="header">
        
          <h1>inspectorTabView.coffee</h1>
        

        
          <div class="toc">
            <h3>Table of Contents</h3>
            <ol>
              
                
                <li>
                  <a class="source" href="admin.html">
                    admin.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditData.html">
                    api.auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditEvent.html">
                    api.auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.html">
                    api.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.entity.html">
                    api.entity.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.map.html">
                    api.map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.server.html">
                    api.server.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.variable.html">
                    api.variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.view.html">
                    api.view.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="app.instance.html">
                    app.instance.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appjs.html">
                    appjs.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="data.html">
                    data.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="dataUtil.html">
                    dataUtil.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="manager.html">
                    manager.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="messages.html">
                    messages.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditData.html">
                    auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEvent.html">
                    auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="base.html">
                    base.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityDefinition.html">
                    entityDefinition.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityObject.html">
                    entityObject.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventAction.html">
                    eventAction.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventRule.html">
                    eventRule.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="link.html">
                    link.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="map.html">
                    map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shape.html">
                    shape.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="user.html">
                    user.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="userSettings.html">
                    userSettings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variable.html">
                    variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminRoutes.html">
                    adminRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appRoutes.html">
                    appRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settings.html">
                    settings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="sockets.html">
                    sockets.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="tutorial.html">
                    tutorial.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="vectors.html">
                    vectors.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="statusTabView.html">
                    statusTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="toolsTabView.html">
                    toolsTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="usersTabView.html">
                    usersTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminView.html">
                    adminView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="alertView.html">
                    alertView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditDataManagerView.html">
                    auditDataManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEventManagerView.html">
                    auditEventManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="baseView.html">
                    baseView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="createMapView.html">
                    createMapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityManagerView.html">
                    entityManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="footerView.html">
                    footerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="helpView.html">
                    helpView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entitiesTabView.html">
                    entitiesTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="inspectorTabView.html">
                    inspectorTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapTabView.html">
                    mapTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeTabView.html">
                    shapeTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="controlsView.html">
                    controlsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="labelEditView.html">
                    labelEditView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkCreatorView.html">
                    linkCreatorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkLabelsView.html">
                    linkLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkView.html">
                    linkView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeLabelsView.html">
                    shapeLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeView.html">
                    shapeView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapesMoverView.html">
                    shapesMoverView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapView.html">
                    mapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="menuView.html">
                    menuView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="overlayView.html">
                    overlayView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="scriptEditorView.html">
                    scriptEditorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settingsView.html">
                    settingsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="startView.html">
                    startView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variableManagerView.html">
                    variableManagerView.coffee
                  </a>
                </li>
              
            </ol>
          </div>
        
      </div>

      
        
        <h2 id="map-controls-edit-map-filter-properties-view">MAP CONTROLS: EDIT / MAP FILTER PROPERTIES VIEW</h2>

        
      
        
        <p>Represents the &quot;Shape properties&quot; tab inside a <a href="controlsView.html">Map Controls View</a>.</p>

        
          <div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">SystemApp</span>.<span class="title">MapControlsInspectorTabView</span> <span class="keyword">extends</span> <span class="title">SystemApp</span>.<span class="title">BaseView</span></span></pre></div>
        
      
        
        <h2 id="dom-elements">DOM ELEMENTS</h2>

        
      
        
        
        
          <div class='highlight'><pre>    <span class="attribute">$topDescription</span>: <span class="literal">null</span>           <span class="comment"># the "H6" element on top of the tab</span>
    <span class="attribute">$attributesDiv</span>: <span class="literal">null</span>            <span class="comment"># the list-div with shape properties (Shape details tab)</span>
    <span class="attribute">$linksDiv</span>: <span class="literal">null</span>                 <span class="comment"># the list-div with the shape connections (Shape related tab)</span>
    <span class="attribute">$parentAndChildDiv</span>: <span class="literal">null</span>        <span class="comment"># the list-div with the shape parent and child elements (Shape related tab)</span>
    <span class="attribute">$eventsDiv</span>: <span class="literal">null</span>                <span class="comment"># the div containing the list of registered / active alerts for the selected shape</span></pre></div>
        
      
        
        <h2 id="init-and-dispose">INIT AND DISPOSE</h2>

        
      
        
        <p>Inits the view. Parent will be the <a href="controlsView.html">Map Controls View</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">initialize</span>: <span class="function"><span class="params">(parent)</span> =&gt;</span>
        <span class="property">@baseInit</span> parent
        <span class="property">@setDom</span>()
        <span class="property">@setEvents</span>()</pre></div>
        
      
        
        <p>Dispose the map view edit control.</p>

        
          <div class='highlight'><pre>    <span class="attribute">dispose</span>:<span class="function"> =&gt;</span>
        $(<span class="built_in">window</span>).unbind <span class="string">"resize"</span>, <span class="property">@resize</span>

        <span class="property">@$attributesDiv</span>.empty()
        <span class="property">@$linksDiv</span>.empty()
        <span class="property">@$parentAndChildDiv</span>.empty()
        <span class="property">@$eventsDiv</span>.empty()

        <span class="property">@baseDispose</span>()</pre></div>
        
      
        
        <p>Set the DOM elements cache.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setDom</span>:<span class="function"> =&gt;</span>
        <span class="property">@setElement</span> $ <span class="string">"#map-ctl-tab-inspector"</span>

        <span class="property">@$topDescription</span> = <span class="property">@$el</span>.find <span class="string">"h6"</span>

        <span class="property">@$attributesDiv</span> = $ <span class="string">"#map-ctl-inspector-attributes"</span>
        <span class="property">@$parentAndChildDiv</span> = $ <span class="string">"#map-ctl-shape-parent-child"</span>
        <span class="property">@$linksDiv</span> = $ <span class="string">"#map-ctl-shape-links"</span>
        <span class="property">@$eventsDiv</span> = $ <span class="string">"#map-ctl-shape-events"</span></pre></div>
        
      
        
        <p>Hide editable forms initially.</p>

        
          <div class='highlight'><pre>        <span class="property">@toggleForms</span> <span class="literal">false</span></pre></div>
        
      
        
        <p>Bind events to DOM and other controls.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setEvents</span>:<span class="function"> =&gt;</span>
        $(<span class="built_in">window</span>).resize <span class="property">@resize</span>

        <span class="property">@listenTo</span> SystemApp.Data.auditEvents, <span class="string">"add"</span>, <span class="property">@loadAuditEvent</span>
        <span class="property">@listenTo</span> SystemApp.Data.auditEvents, <span class="string">"remove"</span>, <span class="property">@removeAuditEvent</span>
        <span class="property">@listenTo</span> SystemApp.Data.auditEvents, <span class="string">"change:title"</span>, <span class="property">@updateAuditEventTitle</span></pre></div>
        
      
        
        <p>Unbind event listeners from the current <a href="shapeView.html">Shape View</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">clearEvents</span>:<span class="function"> =&gt;</span>
        <span class="keyword">if</span> <span class="property">@currentBoundViews</span>?.linkViews?
            _.each <span class="property">@currentBoundViews</span>.linkViews, <span class="function"><span class="params">(linkView)</span> =&gt;</span> linkView.model.<span class="literal">off</span> <span class="string">"change"</span>, <span class="property">@bindAllLinks</span>

        <span class="keyword">if</span> <span class="property">@currentBoundViews</span>?.shapeViews?
            _.each <span class="property">@currentBoundViews</span>.shapeViews, <span class="function"><span class="params">(shapeView)</span> =&gt;</span> shapeView.model.<span class="literal">off</span> <span class="string">"change"</span>, <span class="property">@bindAllChildItems</span></pre></div>
        
      
        
        <p>Enable or disable editing the current shape / link attached events.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setEnabled</span>: <span class="function"><span class="params">(value)</span> =&gt;</span>
        fields = [<span class="property">@$eventsDiv</span>, <span class="property">@$eventsDiv</span>.find <span class="string">"input"</span>]

        <span class="keyword">if</span> <span class="keyword">not</span> value
            elm.attr(<span class="string">"disabled"</span>, <span class="string">"disabled"</span>).addClass(<span class="string">"disabled"</span>) <span class="keyword">for</span> elm <span class="keyword">in</span> fields
        <span class="keyword">else</span>
            elm.removeAttr(<span class="string">"disabled"</span>).removeClass(<span class="string">"disabled"</span>) <span class="keyword">for</span> elm <span class="keyword">in</span> fields</pre></div>
        
      
        
        <p>When window has loaded or resized, call this to resize the <code>$attributesDiv</code> in a way
that the <code>$eventsDiv</code> is always visible.
TODO! Prorperly calculate height considering tabs, headers, paddings etc.</p>

        
          <div class='highlight'><pre>    <span class="attribute">resize</span>:<span class="function"> =&gt;</span>
        height = <span class="property">@parentView</span>.$el.innerHeight() - <span class="property">@$eventsDiv</span>.outerHeight() - <span class="number">140</span>
        <span class="property">@$attributesDiv</span>.css <span class="string">"max-height"</span>, height</pre></div>
        
      
        
        <h2 id="bind-shape-link">BIND SHAPE / LINK</h2>

        
      
        
        <p>Bind a <a href="shapeView.html">Shape View</a> or <a href="linkView.html">Link View</a> to the control
and display its properties / related elements / links / etc.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bind</span>: <span class="function"><span class="params">(view)</span> =&gt;</span>
        <span class="property">@currentBoundViews</span> = view

        <span class="keyword">if</span> <span class="property">@currentBoundViews</span>?

            <span class="keyword">if</span> <span class="property">@currentBoundViews</span>.model?.id?
                <span class="property">@$topDescription</span>.hide()

                <span class="keyword">if</span> <span class="property">@currentBoundViews</span>.linkViews?
                    _.each <span class="property">@currentBoundViews</span>.linkViews, <span class="function"><span class="params">(linkView)</span> =&gt;</span> linkView.model.<span class="literal">on</span> <span class="string">"change"</span>, <span class="property">@bindAllLinks</span>
                <span class="keyword">if</span> <span class="property">@currentBoundViews</span>.shapeViews?
                    _.each <span class="property">@currentBoundViews</span>.shapeViews, <span class="function"><span class="params">(childView)</span> =&gt;</span> childView.model.<span class="literal">on</span> <span class="string">"change"</span>, <span class="property">@bindAllChildItems</span>
            <span class="keyword">else</span></pre></div>
        
      
        
        <p>Show all editable panels.</p>

        
          <div class='highlight'><pre>            <span class="property">@toggleForms</span> <span class="literal">true</span>

        <span class="keyword">else</span>

            <span class="property">@$topDescription</span>.text SystemApp.Messages.multipleShapesSelected
            <span class="property">@$topDescription</span>.show()</pre></div>
        
      
        
        <p>No shape(s) selected, so hide panels and show the h6 element with the &quot;no shapes selected text&quot;.</p>

        
          <div class='highlight'><pre>            <span class="property">@toggleForms</span> <span class="literal">false</span></pre></div>
        
      
        
        <p>Bind attributes, related entities and links.</p>

        
          <div class='highlight'><pre>        <span class="property">@bindAllAttributes</span>()
        <span class="property">@bindAllLinks</span>()
        <span class="property">@bindAllChildItems</span>()
        <span class="property">@bindAllAuditEvents</span>()
        <span class="property">@bindActiveAuditEvents</span>()
        <span class="property">@resize</span>()</pre></div>
        
      
        
        <p>Show or hide forms depending on what&#39;s selected on the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toggleForms</span>: <span class="function"><span class="params">(visible)</span> =&gt;</span>
        <span class="keyword">if</span> visible
            <span class="property">@$el</span>.find(<span class="string">"h5,.panel"</span>).show()
        <span class="keyword">else</span>
            <span class="property">@$el</span>.find(<span class="string">"h5,.panel"</span>).hide()
            <span class="property">@$topDescription</span>.text SystemApp.Messages.noShapeSelected
            <span class="property">@$topDescription</span>.show()</pre></div>
        
      
        
        <h2 id="inspect-properties">INSPECT PROPERTIES</h2>

        
      
        
        <p>Bind all shape / link attributes to the <code>$attributesDiv</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindAllAttributes</span>:<span class="function"> =&gt;</span>
        <span class="property">@$attributesDiv</span>.empty()

        <span class="keyword">if</span> <span class="property">@currentBoundViews</span>?.model?.id?

            <span class="property">@bindAttribute</span> <span class="property">@currentBoundViews</span>.model.id, <span class="string">"ID"</span>
            entityObj = <span class="property">@currentBoundViews</span>.model.entityObject

            <span class="keyword">if</span> entityObj?
                <span class="property">@bindAttribute</span> <span class="property">@currentBoundViews</span>.model.entityDefinitionId(), <span class="string">"Type"</span>
                _.each entityObj.attributes, <span class="property">@bindAttribute</span>
            <span class="keyword">else</span>
                span = $(document.createElement <span class="string">"span"</span>)
                span.html SystemApp.Settings.shape.customText
                <span class="property">@$attributesDiv</span>.append span</pre></div>
        
      
        
        <p>Add a single attribute to the <code>$attributesDiv</code>. First check the <code>ignoreDisplayProps</code> setting
to see if that particular attribute should be ignored.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindAttribute</span>: <span class="function"><span class="params">(propValue, propName)</span> =&gt;</span>
        <span class="keyword">if</span> SystemApp.Settings.map.ignoreDisplayProps.indexOf(propName) &gt; <span class="number">0</span>
            <span class="keyword">return</span>

        <span class="keyword">if</span> <span class="keyword">not</span> propValue? <span class="keyword">or</span> propValue <span class="keyword">is</span> <span class="string">""</span>
            <span class="keyword">return</span></pre></div>
        
      
        
        <p>Transform the value to a readable string.</p>

        
          <div class='highlight'><pre>        propValue = JSON.stringify propValue
        propValue = propValue.replace <span class="regexp">/\"/g</span>, <span class="string">""</span>

        div = $ document.createElement <span class="string">"div"</span>
        name = $ document.createElement <span class="string">"label"</span>
        value = $ document.createElement <span class="string">"span"</span>

        name.html propName + <span class="string">":"</span>
        value.html propValue</pre></div>
        
      
        
        <p>If property value is too long, add a class to make text smaller.</p>

        
          <div class='highlight'><pre>        value.addClass <span class="string">"small"</span> <span class="keyword">if</span> propValue.length &gt; <span class="number">50</span>

        div.append name
        div.append value

        <span class="property">@$attributesDiv</span>.append div</pre></div>
        
      
        
        <h2 id="shape-related-tab">SHAPE RELATED TAB</h2>

        
      
        
        <p>Bind all child items to the &quot;Related&quot; tab.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindAllChildItems</span>:<span class="function"> =&gt;</span>
        <span class="property">@$parentAndChildDiv</span>.empty()
        <span class="property">@bindParentDetails</span>()</pre></div>
        
      
        
        <p>Add a single child entity to the child div, passing the shape view and its unique ID.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindChildItem</span>: <span class="function"><span class="params">(item)</span> =&gt;</span>
        div = $ document.createElement <span class="string">"div"</span>
        name = $ document.createElement <span class="string">"label"</span>
        value = $ document.createElement <span class="string">"span"</span>

        name.html item.typeName + <span class="string">": "</span>
        value.html item.text()
        value.click item, <span class="property">@relatedEntityClick</span>

        div.addClass <span class="string">"child"</span>
        div.append name
        div.append value

        <span class="property">@$parentAndChildDiv</span>.append div</pre></div>
        
      
        
        <p>Bind the parent entity details to the &quot;Related&quot; tab. For example if the selected shape
is a <a href="host.html">Host</a>, it will bind details about the <a href="machine.html">Machine</a> in where
it is running.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindParentDetails</span>:<span class="function"> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@currentBoundViews</span>?.model?.id?
            <span class="keyword">return</span>

        isShape = <span class="property">@currentBoundViews</span>.constructor <span class="keyword">is</span> SystemApp.MapShapeView

        <span class="keyword">if</span> <span class="keyword">not</span> isShape
            target = <span class="property">@parentView</span>.parentView.shapeViews[<span class="property">@currentBoundViews</span>.model.targetId()]
            parent = <span class="property">@parentView</span>.parentView.shapeViews[<span class="property">@currentBoundViews</span>.model.sourceId()]
            parentText = parent.model.id + <span class="string">" - "</span> + target.model.id

        <span class="keyword">if</span> <span class="keyword">not</span> parent?
            <span class="keyword">return</span>

        div = $ document.createElement <span class="string">"div"</span>
        name = $ document.createElement <span class="string">"label"</span>
        value = $ document.createElement <span class="string">"span"</span>

        name.html <span class="string">"Parent: "</span>
        value.html parentText

        <span class="keyword">if</span> isShape
            value.click parent, <span class="property">@relatedEntityClick</span>
        <span class="keyword">else</span>
            value.addClass <span class="string">"nocursor"</span>

        div.addClass <span class="string">"parent"</span>
        div.append name
        div.append value

        <span class="property">@$parentAndChildDiv</span>.append div</pre></div>
        
      
        
        <p>When user clicks on a related entity, copy its name or value and trigger the event
to search for it at the <a href="entityListView.html">Entity List View</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">relatedEntityClick</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        entity = e.data
        SystemApp.mapEvents.trigger <span class="string">"entitylist:search"</span>, entity.text()</pre></div>
        
      
        
        <h2 id="links">LINKS</h2>

        
      
        
        <p>Bind the links tab.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindAllLinks</span>:<span class="function"> =&gt;</span>
        <span class="property">@$linksDiv</span>.empty()

        <span class="keyword">if</span> <span class="property">@currentBoundViews</span>? <span class="keyword">and</span> <span class="property">@currentBoundViews</span>?.linkViews? <span class="keyword">and</span> _.size(<span class="property">@currentBoundViews</span>.linkViews) &gt; <span class="number">0</span>
            _.each <span class="property">@currentBoundViews</span>.linkViews, <span class="property">@bindLink</span></pre></div>
        
      
        
        <p>Add a single link to the links div, passing the <a href="linkView.html">Link View</a> and its name.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindLink</span>: <span class="function"><span class="params">(linkView)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> linkView?.model?.id?
            <span class="keyword">return</span>

        div = $ document.createElement <span class="string">"div"</span>
        name = $ document.createElement <span class="string">"label"</span>
        value = $ document.createElement <span class="string">"span"</span>

        <span class="keyword">if</span> linkView.model.sourceId() <span class="keyword">is</span> <span class="property">@currentBoundViews</span>.model.id
            target = linkView.model.targetId()
        <span class="keyword">else</span>
            target = linkView.model.sourceId()

        target = <span class="property">@parentView</span>.parentView.shapeViews[target]

        <span class="keyword">if</span> target.model.entityObject?
            target = target.model.entityObject.title()
        <span class="keyword">else</span>
            target = target.model.id

        textStart = linkView.model.textStart()
        textMiddle = linkView.model.textMiddle()
        textEnd = linkView.model.textEnd()</pre></div>
        
      
        
        <p>All labels will be shown and merged on the &quot;text&quot;.</p>

        
          <div class='highlight'><pre>        text = <span class="string">""</span>
        text += <span class="string">" "</span> + textStart <span class="keyword">if</span> textStart? <span class="keyword">and</span> textStart <span class="keyword">isnt</span> <span class="string">""</span>
        text += <span class="string">" "</span> + textMiddle <span class="keyword">if</span> textMiddle? <span class="keyword">and</span> textMiddle <span class="keyword">isnt</span> <span class="string">""</span>
        text += <span class="string">" "</span> + textEnd <span class="keyword">if</span> textEnd? <span class="keyword">and</span> textEnd <span class="keyword">isnt</span> <span class="string">""</span>

        label = text
        label = SystemApp.Messages.noLabelsSet <span class="keyword">if</span> <span class="keyword">not</span> label? <span class="keyword">or</span> label <span class="keyword">is</span> <span class="string">""</span>

        name.html <span class="string">"Link » <span class="subst">#{target}</span>: "</span>
        value.html $.trim(label)

        div.append name
        div.append value

        <span class="property">@$linksDiv</span>.append div</pre></div>
        
      
        
        <h2 id="events-bottom-tab">EVENTS BOTTOM TAB</h2>

        
      
        
        <p>Load all <a href="auditEvent.html">Audit Events</a> and create the elements on the alerts div.</p>

        
          <div class='highlight'><pre>    <span class="attribute">loadAllAuditEvents</span>:<span class="function"> =&gt;</span>
        <span class="property">@$eventsDiv</span>.empty()
        _.each SystemApp.Data.auditEvents.models, <span class="property">@loadAuditEvent</span></pre></div>
        
      
        
        <p>Add a single <a href="auditEvent.html">AuditEvent</a> to the alerts div.</p>

        
          <div class='highlight'><pre>    <span class="attribute">loadAuditEvent</span>: <span class="function"><span class="params">(auditEvent)</span> =&gt;</span>
        div = $ document.createElement <span class="string">"div"</span>
        checked = $ document.createElement <span class="string">"input"</span>
        title = $ document.createElement <span class="string">"label"</span>

        checked.attr <span class="string">"id"</span>, SystemApp.Settings.auditEvent.shapeCheckboxName + auditEvent.id
        checked.attr <span class="string">"name"</span>, SystemApp.Settings.auditEvent.shapeCheckboxName
        checked.attr <span class="string">"title"</span>, auditEvent.description() + <span class="string">" "</span> + SystemApp.Messages.tooltipShapeAuditEventCheckbox
        checked.attr <span class="string">"type"</span>, <span class="string">"checkbox"</span>
        checked.change auditEvent.id, <span class="property">@eventCheckChange</span>

        title.html auditEvent.friendlyId()
        title.attr <span class="string">"for"</span>, SystemApp.Settings.auditEvent.shapeCheckboxName + auditEvent.id
        title.attr <span class="string">"title"</span>, SystemApp.Messages.tooltipShapeAuditEventCheckbox

        div.append checked
        div.append title

        <span class="property">@$eventsDiv</span>.append div</pre></div>
        
      
        
        <p>When user deletes an <a href="auditEvent.html">AuditEvent</a>, remove its associated div from the <code>$eventsDiv</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">removeAuditEvent</span>: <span class="function"><span class="params">(auditEvent)</span> =&gt;</span>
        $(<span class="string">"#"</span> + SystemApp.Settings.auditEvent.shapeCheckboxName + auditEvent.id).parent().remove()</pre></div>
        
      
        
        <p>If user changes the title of an <a href="auditEvent.html">AuditEvent</a>, update the corresponding div on <code>$eventsDiv</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">updateAuditEventTitle</span>: <span class="function"><span class="params">(auditEvent)</span> =&gt;</span>
        title = auditEvent.id
        $(<span class="string">"#"</span> + SystemApp.Settings.auditEvent.shapeCheckboxName + auditEvent.id).parent().children(<span class="string">"label"</span>).html title</pre></div>
        
      
        
        <p>Check all <a href="auditEvent.html">Audit Events</a> that are attached to the selected <a href="shape.html">Shape</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindAllAuditEvents</span>:<span class="function"> =&gt;</span>
        checkboxes = <span class="property">@$eventsDiv</span>.find <span class="string">"input"</span>
        checkboxes.prop <span class="string">"checked"</span>, <span class="literal">false</span>

        <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@currentBoundViews</span>?.model?.auditEventIds?
            <span class="property">@$eventsDiv</span>.hide()
            <span class="keyword">return</span>

        <span class="property">@$eventsDiv</span>.show()
        ids = <span class="property">@currentBoundViews</span>.model.auditEventIds()</pre></div>
        
      
        
        <p>If there are <a href="auditEvent.html">AuditEvent</a> IDs attached to the selected shape/link, then
mark the correspondent checkboxes.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> ids? <span class="keyword">and</span> ids.length &gt; <span class="number">0</span>
            <span class="keyword">for</span> alertId <span class="keyword">in</span> ids
                $(<span class="string">"#"</span> + SystemApp.Settings.auditEvent.shapeCheckboxName + alertId).prop(<span class="string">"checked"</span>, <span class="literal">true</span>)</pre></div>
        
      
        
        <p>Bind all currently active <a href="auditEvent.html">Audit Events</a> for the selected shape.
Active alerts will have a small icon next to them, set via a CSS class.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindActiveAuditEvents</span>:<span class="function"> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@currentBoundViews</span>?
            <span class="keyword">return</span></pre></div>
        
      
        
        <p>Remove the <code>active</code> class from all alert divs.</p>

        
          <div class='highlight'><pre>        <span class="property">@$eventsDiv</span>.children(<span class="string">"div"</span>).removeClass <span class="string">"active"</span></pre></div>
        
      
        
        <p>Add the <code>active</code> class to all corresponding active alert divs.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> <span class="property">@currentBoundViews</span>?.labelsView?.activeAuditEvents?
            _.each <span class="property">@currentBoundViews</span>.labelsView.activeAuditEvents, <span class="function"><span class="params">(auditEvent)</span> =&gt;</span>
                $(<span class="string">"#"</span> + SystemApp.Settings.auditEvent.shapeCheckboxName + auditEvent.id).parent().addClass <span class="string">"active"</span></pre></div>
        
      
        
        <p>When user (un)check an alert checkbox, update the <a href="shape.html">Shape</a> <code>auditEventIds</code> property.</p>

        
          <div class='highlight'><pre>    <span class="attribute">eventCheckChange</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@currentBoundViews</span>?
            <span class="keyword">return</span>

        src = $ e.currentTarget
        checked = src.prop <span class="string">"checked"</span>

        <span class="keyword">if</span> checked
            arr = _.union <span class="property">@currentBoundViews</span>.model.auditEventIds(), e.data
        <span class="keyword">else</span>
            arr = _.without <span class="property">@currentBoundViews</span>.model.auditEventIds(), e.data
            <span class="keyword">delete</span> <span class="property">@currentBoundViews</span>.labelsView.activeAuditEvents[e.data]</pre></div>
        
      
        
        <p>Force remove any null values from the array, and set the shape/link model <code>auditEventIds</code> attribute.</p>

        
          <div class='highlight'><pre>        arr = _.without arr, <span class="literal">null</span>
        <span class="property">@currentBoundViews</span>.model.auditEventIds arr</pre></div>
        
      
        
        <p>If no alerts are selected, remove all <code>active</code> classes from the <code>$eventsDiv</code>
and force reset the selected shape/link view to its original appearance.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> arr.length &lt; <span class="number">1</span>
            <span class="property">@$eventsDiv</span>.children(<span class="string">"div"</span>).removeClass <span class="string">"active"</span>
            <span class="property">@currentBoundViews</span>.render()</pre></div>
        
      
        
        <p>Save the current shape/link model.</p>

        
          <div class='highlight'><pre>        <span class="property">@currentBoundViews</span>.model.save()
        <span class="property">@parentView</span>.model.save()</pre></div>
        
      
      <div class="fleur">h</div>
    </div>
  </div>
</body>
</html>
